@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
* {
    box-sizing: border-box;
}


.close {
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #f6f6f6;
    padding: 17px;
    left: 0;
    top: 0;
    transition: all 0.3s;
    color: #54589c;
    cursor: pointer;

    &:hover {
        background: #f6f6f6;
    }
}
body {
    margin: 0;
    overflow-x: hidden;
    font-family: 'Roboto Condensed', sans-serif;

    &.open {
        .panel {
            right: 0;
        }
        .grid {
            transform: translateX(-450px);
            opacity: 0.2;
            pointer-events: none;
        }
    }

    span {
        font-size: 10px;
        opacity: 0.1;
        position: absolute;
        top: 20px;
        left: 20px;
    }
}

$itemWidth : 8.3333vw;

.grid_alt {
    background: #2a3648;
    span {
        color: white;
    }

    .grid_item {
        &:hover {
            background: #293340;
        }
    }
    .menu_part {
        background: white !important;
    }
}

.panel {
    overflow-y: scroll;
    width: 450px;
    border-left: 1px solid whitesmoke;
    position: fixed;
    padding: 100px 60px 60px 60px;
    background: white;
    right: -450px;
    height: 100vh;
    top: 0;
    transition: all 0.3s;

    h1,
    h2 {
        margin: 0;
        font-size: 16px;
    }

    h2 {
        margin-top: 30px;
    }

    p {
        white-space: pre;
        tab-size: 2;
        font-family: 'Source Code Pro', monospace;
        font-size: 9px;
        font-weight: 100;
        line-height: 14px;
    }


}

.grid,
.grid_alt {
    transition: all 0.3s;
    overflow: hidden;
    width: 100vw;
    margin: 0 auto;
    padding: 100px;

    &_item {
        width: $itemWidth;
        height: $itemWidth;

        @media only screen and (max-width: 1200px) {
            width: 20vw;
            height:  20vw;
        }

        @media only screen and (max-width: 700px) {
            width: 25vw;
            height:  25vw;
        }

        @media only screen and (max-width: 400px) {
            width: 50vw;
            height:  50vw;
        }
        float: left;
        position: relative;
        transition: all 0.5s;
        overflow: hidden;

        &:hover {
            i {
                bottom: 20px;
            }
        }

        i {
            opacity: 0.1;
            position: absolute;
            right: 20px;
            bottom: -20px;
            transition: all 0.3s;
            cursor: pointer;
            font-size: 12px;

            &:hover {
                opacity: 1;
            // border: 2px solid black;
            }
        }

        &:hover {
            background: #f7f7f7;
        }

        @for $i from 1 through 100 {

            &:nth-of-type(#{$i}) {
                opacity: 0;
            //background: rgb(random(255), random(255), random(255)) !important;
                animation: fadeIn 1s $i / 35 + 0s forwards;
                .menu {
                    &_part {
                    //background: rgb(random(255), random(255), random(255)) !important;
                    }
                }
            }
        }


        &__inner {
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            top: 50%;
            transform: translatey(-50%);
            text-align: center;

            & .menu {
                &:hover {
                    opacity: 1 !important;
                }
            }
        }
    }
}

@keyframes fadeIn {
    to{opacity: 1}
}